<template>
	<div>
		<el-button class="addBtn" type="primary" @click="dialogFormVisible = true">新增分类</el-button>

		<el-table :data="sortData" style="width: 100%">
			<el-table-column
			      type="selection"
			      width="55">
			    </el-table-column>
			<el-table-column label="分类" width="180">
				<template slot-scope="scope">
					<el-tag size="medium">{{ scope.row.sortContent }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-dialog title="新增分类" :visible.sync="dialogFormVisible" style="width: 40%; margin: 0 auto;"
			:before-close="handleClose">
			<el-form :model="form" ref="form" v-if="Close">
				<el-form-item label="分类名" :label-width="formLabelWidth">
					<el-input v-model="form.sortContent" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Close">取 消</el-button>
				<el-button type="primary" @click="addSort">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import sortApi from "@/api/sort.js"
	export default {
		data() {
			return {
				sortData: [],
				dialogFormVisible: false,
				formLabelWidth: '100px',
				form: {
					sortId: "",
					sortContent: ""
				}
			}
		},
		methods: {
			async queryAllSort() {
				const res = await sortApi.queryAllSort("/znSort/queryAllSort");
				if (res.code == 200) {
					this.sortData = res.data;
				}
			},
			async addSort() {
				const res = await sortApi.addSort("/znSort/addSort", {
					sortContent: this.form.sortContent
				});
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.$message.success("添加成功");
					this.queryAllSort();
				}
				
			},
			async deleteSort(row) {
				const res = await sortApi.deleteSort("/znSort/deleteSort/" + row.sortId);
				this.queryAllSort();
			},
			handleDelete(index, row) {
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteSort(row),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleClose() {
				this.dialogFormVisible = false;
				this.$refs.form.resetFields();
			},
			Close() {
				this.dialogFormVisible = false;
				this.$nextTick(() => {
					this.$refs.form.resetFields();
				})
			},
		},
		created() {
			this.queryAllSort();
		}
	}
</script>

<style lang="scss" scoped>
	.addBtn {
		margin: 30px 0 10px 30px;
	}
</style>